<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">用户管理</h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a th:href="@{../admin}">首页</a></li>
          <li class="breadcrumb-item active">连接管理</li>
          <li class="breadcrumb-item active">连接列表</li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- Main content -->
<section class="content">
  <div class="card card-info">
    <form id="searchForm" class="needs-validation form-inline" novalidate="">
      <div class="form-group">
        <label for="ip">ip地址:</label>
        <input type="text" class="form-control m-2" id="ip">
      </div>
      <div class="form-group">
        <label for="command">连接命令:</label>
        <input type="text" class="form-control m-2" id="command">
      </div>
      <div class="form-group">
        <button class="btn btn-primary ml-3" type="submit">查询</button>
        <button class="btn btn-default ml-2" type="reset">重置</button>
      </div>
    </form>
  </div>
  <div class="card card-body">
    <table class="table-sm" id="table"></table>
  </div>
</section>

<!-- 表单模态框 -->
<section id="formModalWrapper">
  <div class="modal fade" id="formModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="formTitle"></h5>
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="formContent"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="saveOrUpdateBtn">保存
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<script>

  $(function () {

    window.operateEvents = {
      // 强制下线
      'click .btn_kick': function (e, value, row, index) {
        kickChannel(row)
      },
      // 加入黑名单
      'click .btn_blacklist': function (e, value, row, index) {
        blacklistChannel(row)
      }
    }

    var columns = [
      {
        title: '序号',
        field: '',
        align: 'center',
        formatter: function (value, row, index) {
          var pageSize = $('#table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
          var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
          return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
        }
      },
      {
        field: 'id',
        title: '信道id',
        align: "center"
      },
      {
        field: 'ip',
        title: '信道ip',
        align: "center"
      }, {
        field: 'gatewayId',
        title: '网关id',
        align: "center",
      }, {
        field: 'command',
        title: '连接命令',
        align: "center",
      }, {
        field: 'connectTime',
        title: '连接时间',
        align: "center",
        formatter: dateFormat
      }, {
        field: 'operation',
        title: '操作',
        align: "center",
        events: operateEvents,
        formatter: operationFormatter
      }];

    function operationFormatter(value, row, index) {
      return '<button class="btn btn-info btn-sm btn_kick mr-1">强制下线</button><button class="btn btn-danger btn-sm btn_blacklist">加入黑名单</button>';
    }

    function dateFormat(value, row, index) {
      let ret;
      let date = new Date(parseInt(row.connectTime));
      let year = date.getFullYear().toString();
      let month = (date.getMonth() + 1).toString();
      let monthStr = month.length === 1 ? `0${month}` : month;
      let day = date.getDate().toString();
      let dayStr = day.length === 1 ? `0${day}` : day;
      let hour = date.getHours().toString();
      let hourStr = hour.length === 1 ? `0${hour}` : hour;
      let minute = date.getMinutes().toString();
      let minuteStr = minute.length === 1 ? `0${minute}` : minute;
      let second = date.getSeconds().toString();
      let secondStr = second.length === 1 ? `0${second}` : second;
      return `${year}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}:${secondStr}`;
    }

    var options = {
      id: "#table",
      url: '/col/channel',
      columns: columns,
      showRefresh: true,
      queryParams: queryParams
    }
    Core.initTable(options);

    function refreshTable() {
      Core.refreshTable("#table")
    }

    // 查询参数
    function queryParams(params) {
      return {
        page: params.pageNumber,
        size: params.pageSize,
        ip: $("#ip").val(),
        command: $("#command").val()
      };
    }

    // 查询
    $('#searchForm').submit(function (event) {
      event.preventDefault();
      event.stopPropagation();
      refreshTable();
    })

    // 强制下线
    function kickChannel(row) {
      Core.confirm("确定要强制下线该连接吗？", function () {
        Core.postAjax("/col/channel/kick", {command: row.command}, function(res) {
          console.log(res);
          if (res.code === 1) {
            layer.msg("强制下线成功");
            refreshTable();
          } else {
            layer.msg(res.message);
          }
        })
      })
    }

    // 加入黑名单
    function blacklistChannel(row) {
      Core.confirm("确定要将该连接加入黑名单吗？", function () {
        Core.postAjax("/col/channel/blacklist", {command: row.command}, function (res) {
          if (res.code === 1) {
            layer.msg("加入黑名单成功");
            refreshTable();
          } else {
            layer.msg(res.message);
          }
        })
      })
    }
  });

</script>